<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>确认订单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css2/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/css2/common.css" rel="stylesheet"/>
    <link href="/css2/cart.css" rel="stylesheet"/>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body class="graybg-theme">
    <!--头部-->
        <div class="topper">
            <div class="wrapper">
                <div class="left-bar">
                    <div class="back-home divider">
                        <em></em><a href="index.html">商城首页</a>
                    </div>
                    <div class="item"><a href="">商家中心</a></div>
                </div>
                <div class="right-bar">
                    <div class="login-user sub-menu">
                        <a class="menu-hd" href="">txtangxia<em></em></a>
                        <div class="down">
                            <a href="">内容</a>
                            <a href="">内容</a>
                            <a href="">内容</a>
                        </div>
                    </div>
                    <div class="item"><a href="">消息（<span class="txt-theme">0</span>）</a></div>
                    <div class="logout divider"><a href="">退出</a></div>
                    <span class=""></span>
                    <div class="cart"><em></em><a href="">购物车<span class="txt-theme">2</span>件</a></div>
                    <div class="order"><em></em><a href="">我的订单</a></div>
                    <div class="fav"><em></em><a href="">我的收藏</a></div>
                    <div class="help"><em></em><a href="">帮助中心</a></div>
                </div>
            </div>
        </div>
        <div class="cart-header wrapper">
            <div class="logo">
                <a href="index.html"><img src="img/logo.png" alt="logo" /></a>
            </div>
            <div class="step-box">
                <div class="row">
                    <div class="step first active col-3">
                        <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
                    </div>
                    <div class="step active col-3">
                        <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
                    </div>
                    <div class="step col-3">
                        <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
                    </div>
                    <div class="step last col-3">
                        <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
                    </div>
                </div>
            </div>
        </div>
    <!--头部-->

    <div class="wrapper confirm-wrap">
        <div class="confirm-tit">
            <span class="tit">选择收货地址 :</span>
            <input id="add" type="button" value="新增" class="layui-btn">
        </div>
        <div class="confirm-address clearfix" >
            <div class="col col-4" th:aid="${a.id}" th:each="a:${addressList}">
                <div class="item active">
                    <div class="action">
                        <a class="edit" th:aid="${a.id}" href="javascript:;">修改</a>
                    </div>
                    <div class="info">
                        <div class="ellipsis"><img src="/img/ico/user.jpg" alt="" />[[${a.province}]][[${a.city}]][[${a.area}]]（[[${a.consignee}]] 收）</div>
                        <div class="ellipsis"><img src="/img/ico/dizhi.jpg" alt="" />[[${a.address}]]</div>
                        <div class="ellipsis"><img src="/img/ico/tel.jpg" alt="" />[[${a.tel}]]</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="confirm-address-bar"  style="display: none;">
            <a href="javascript:;" class="drop" data-action="drop">显示全部地址</a>
        </div>

        <div class="confirm-tit">
            <span class="tit">发票 :</span>
        </div>
        <div class="control-group">
            <div class="hd">
                发票抬头：
            </div>
            <div class="bd">
                <select class="ui-txtin" name="" id=""><option value="">个人</option></select>
                <input class="ui-txtin" style="width: 300px;"  type="text" name="" id="" />
            </div>
        </div>
        <div class="confirm-tit">
           <span class="tit">确认商品信息:</span><div class="right"><a class="back" href="/cart/list">返回购物车></a></div>
        </div>


        <div class="confirm-goods">
            <div class="confirm-goods-hd clearfix">
                <div class="col col1">店铺：小米旗舰店</div>
                <div class="col col2">单价（元）</div>
                <div class="col col3">数量</div>
                <div class="col col4">小计（元）</div>
            </div>
            <div class="confirm-goods-bd" th:each="c:${cartList}">
                <div class="goods clearfix">
                    <div class="col col1">
                        <img th:src="${c.imgPath}" alt="">
                        <div class="info">
                            <div class="name">[[${c.name}]]</div>
                            <div class="meta"><span>[[${c.color}]]</span></div>
                        </div>
                    </div>
                    <div class="col col2">￥[[${c.price}]]</div>
                    <div class="col col3">[[${c.number}]]</div>
                    <div class="col col4">￥[[${c.price} * ${c.number}]]</div>
                </div>
            </div>
            <div class="confirm-goods-ft clearfix">
                <div class="fl"><span class="vm-ib">买家留言： </span><textarea class="ui-txtin" style="width: 410px;" name="" placeholder="在此输入给商家的留言"></textarea></div>
            </div>
        </div>

        <form id="form" action="/order/save" method="post">
            <input type="hidden"  name="ids" th:value="${ids}">
            <input type="hidden" id="addressId"  name="addressId" >
         <div class="confirm-total">
            <div class="box">
<!--                <div class="item">应付总额：<strong> ¥ </strong></div>-->
                <button class="ui-btn-theme go-charge" href="/order/save">去结算</button>
            </div>
        </div>
        </form>
    </div>
    <!--脚部-->
    <div class="fatfooter">
    </div>


</body>
<!--弹出窗口的模板-->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收货人</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id">
                    <input type="text" name="consignee" id="consignee" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">省</label>
                <div class="layui-input-inline">
                    <input type="text" name="province" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">市</label>
                <div class="layui-input-inline">
                    <input type="text" name="city" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">区</label>
                <div class="layui-input-inline">
                    <input type="text" name="area" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input id="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>
<script src="/js2/jquery.js"></script>
<script src="/js/cart.js"></script>
<link rel="stylesheet" href="/js2/icheck/style.css"/>
<script src="/js2/icheck/icheck.min.js"></script>
<script src="/js2/layer/layer.js"></script>
<script src="/js2/global.js"></script>
<script src="/layui/layui.js"></script>
<script>
    //打开默认不选中任何一个地址
    $(document).ready(function() {
        // 点击地址项
        $('.confirm-address .item').on('click', function() {
            // 移除其他地址项的active类
            $('.confirm-address .item').removeClass('active');
            // 添加被点击地址项的active类
            $(this).addClass('active');
        });
        // 默认地址不选中
        $('.confirm-address .item').removeClass('active');
    });
    $(document).ready(function() {
        // 点击地址项
        $('.confirm-address .item').on('click', function() {
            // 移除其他地址项的active类
            $('.confirm-address .item').removeClass('active');
            // 添加被点击地址项的active类
            $(this).addClass('active');
            // 获取对应地址项的ID
            var addressId = $(this).parent().attr("aid");
            console.log('Address ID:', addressId);
            // 将地址项的ID放入隐藏框中
            $('input[name="addressId"]').val(addressId);
        });
    });
    layui.use(["layer","form","table"],function (){
        // console.log("123");
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var table=layui.table;

        //给新增的按钮绑定事件
        $("#add").on("click",function (){
            layer.open({
                title:"新增用户",
                type:1,
                area:['400px','400px'],
                content:$("#template1").html()
            });
            //给保存的按钮绑定事件
            $("#save").on("click",function (){
                //1.把表单的数据都取出来
                var data = form.val("form1");
                var tel = data.tel;
                var pd = /^1[3456789]\d{9}$/;
                if (!pd.test(tel)){
                    layer.msg("手机号输入错误，请重新输入");
                    return false;
                }
                console.log(data);
                //2.派一个人去发请求,把上边取出来的数据带过去(Ajax)
                //第一个参数：请求地址
                //第二个参数：请求时传的数据
                //第三个参数：请求成功后做什么：这个function只有200成功时才执行
                data.cmd = "save";
                $.post("/uc-address/save",data,function (){
                    //关窗口
                    layer.closeAll();
                    //给成功提示
                    layer.msg("保存成功");
                    location.reload();
                });
            })
        });

        //给修改按钮绑定事件      写方法
        $(".edit").on("click", function () {
            var address = $(this);
            $.get("/uc-address/select?id="+address.attr("aid"), function (oldAddress) {
                console.log(oldAddress);
                layer.open({
                    title: "编辑地址",
                    type: 1,
                    area: ['600px', '600px'],
                    content: $("#template1").html()
                });
                form.val("form1", oldAddress);
                //给保存按钮绑定事件
                $("#save").on("click", function () {
                    //1.把表单中的数据都取出来
                    var data = form.val("form1");
                    console.log(data)
                    $.post("/uc-address/save", data, function () {
                        //关窗口
                        layer.closeAll();
                        //给成功提示
                        layer.msg("保存成功")
                        location.reload();
                    });
                });
            });
        });
    });



</script>
</html>